<script setup>
const { proxy } = getCurrentInstance()

useHead({
  title: '寓盟管家-app下载'
})
function toDownload() {
  const anchorId = 'main'
  const anchor = document.getElementById(anchorId)
  if (anchor) {
    // 滚动到元素
    anchor.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
  }
}
</script>

<template>
  <div class="w-full">
    <div class="banner flex flex-col items-center">
      <div class="tit text-50px h-70px leading-70px mt-60px">寓盟 SAAS 客户端</div>
      <div class="desc 400 text-20px mt-20px mb-40px">同时支持 Mac、Windows、寓盟管家</div>
      <div class="free-btn text-20px" @click="toDownload">立即下载</div>
    </div>
    <div class="main-btm">
      <img src="/public/images/banner/solution/downLoad.png" alt="" class="img" />
      <div id="main" class="main">
        <NuxtLink class="item" to="https://down.yumeng.work/binary/mac/%E5%AF%93%E7%9B%9F%E7%AE%A1%E5%AE%B6-v1.0.0.dmg">
          <img src="/public/images/banner/solution/macOs.png" alt="" class="icon-img" />
          寓盟 macOS 客户端
        </NuxtLink>
        <NuxtLink class="item" to="https://down.yumeng.work/binary/win/%E5%AF%93%E7%9B%9F%E7%AE%A1%E5%AE%B6-v1.0.0.zip">
          <img src="/public/images/banner/solution/windows.png" alt="" class="icon-img" />
          寓盟 Windows 客户端
        </NuxtLink>
        <NuxtLink class="item">
          <img src="/public/images/banner/solution/applets.png" alt="" class="icon-img" />
          寓盟管家小程序
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<style scoped>
.banner {
  width: 100%;
  height: 586px;
  background: url('/public/images/banner/solution/downLoadBg.png') no-repeat 0 0;
  background-size: cover;
}
.tit {
  color: #fff;
  font-weight: 600;
}
.desc {
  color: #cbddff;
}
.free-btn {
  width: 180px;
  height: 54px;
  line-height: 54px;
  font-weight: 500;
  background: #ffffff;
  color: #0a87f8;
  border-radius: 29px;
  text-align: center;
  cursor: pointer;
}
.main-btm {
  margin-top: -290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100px;
}
.img {
  width: 1000px;
  height: 615px;
}

.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
  margin-top: 50px;
}
.item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon-img {
  width: 84px;
  height: 84px;
}
</style>
